<template>
  <l-map id="Lmaps" :zoom="mapData.zoom" :center="mapData.center" @ready="ready">
    <l-tile-layer v-for="(item,index) in urls" :key="index" :url="item" />
  </l-map>
</template>
<script>
import { LMap, LTileLayer } from 'vue2-leaflet'
import 'leaflet/dist/leaflet.css'
import { lmapConfig } from '@/utils/constant'
import map from '@/config/map'
import { mapGetters } from 'vuex'
export default {
  components: { LMap, LTileLayer },
  props: {
    mapData: {
      type: Object,
      required: false,
      default: () => {
        return {
          center: [39.460464, 115.851277],
          zoom: 20
        }
      }
    }
  },
  data() {
    return {
      urls: lmapConfig.urls,
      map: {}
    }
  },
  computed: {
    ...mapGetters(['project'])
  },
  watch: {
    project: {
      handler(newVal) {
        if (newVal.map) {
          this.urls = map.mapTypes[newVal.map]
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    ready(map) {
      this.map = map
      this.$emit('load', map)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    #Lmaps {
        z-index: 0;
    }
</style>
